<template>
    <div class="audio">
        <div class="audio_count">
            <div class="input">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="报警声音" prop="file">
                        <el-upload action="/upload" :on-success="handleSuccess" :on-error="handleError"
                            :before-upload="beforeUpload" :limit="1" :show-file-list="false" :file-list="fileList">
                            <el-button type="primary" size="small">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="报警内容" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="启用" value="shanghai"></el-option>
                            <el-option label="禁用" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="type">
                        <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="末端报警" name="type"></el-checkbox>
                            <el-checkbox label="动力报警" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">设置</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Audio',
    data() {
        return {
            uploadForm: {
                // 其他表单项...
                file: null,
            },
            ruleForm: {
                region: '',
                type: [],
            },
            fileList: [],
            rules: {
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],

                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
            }
        };
    },
    methods: {

        // 文件上传成功的回调
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
            // 处理上传成功后的逻辑
            console.log('文件上传成功', response);
        },
        // 文件上传失败的回调
        handleError(error, file, fileList) {
            // 处理上传失败后的逻辑
            console.error('文件上传失败', error);
        },
        // 上传前的钩子函数，可用于限制文件类型、大小等
        beforeUpload(file) {
            // 在此处可以添加限制条件，例如文件类型、大小等
            // 返回 false 可以取消上传
            console.log('上传前钩子函数', file);
            return true;
        },
        // 表单提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<!-- <style lang="scss">
.audio{
    .el-input__inner{
        width: 300px;
    }
}
</style> -->

<style lang="scss" scoped >
.audio {
    width: 100%;
    height: 100%;

    .audio_count {
        width: calc(100% - 30px);
        height: calc(100vh - 160px);
        margin: 15px auto;
        background-color: white;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        .input {
            width: 400px;
            height: 24%;
        }
    }
    
}
</style>
  